//开发配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');//处理vue的插件
const HTMLPlugin = require('html-webpack-plugin');//处理html的插件
const webpack = require('webpack');

module.exports={
  mode:'development',
  entry: path.join(__dirname, 'src/main.js'),
  output: {
      publicPath: './',
      filename: 'bundle.js', // 文件输出
      path: path.join(__dirname, '/dist')
  },
  plugins: [
      new VueLoaderPlugin(),
      new webpack.DefinePlugin({
          'process.env': {
              NODE_ENV: '"development"'
          }
      }),
      new HTMLPlugin(), // 处理html模版
      new webpack.HotModuleReplacementPlugin(),//热替换模块
      new webpack.NoEmitOnErrorsPlugin()
  ],
  devtool : 'cheap-source-map', // 调试代码时可以看到自己原本的代码
  devServer : {
      port: 8000,
      host: 'localhost',
      overlay: {
          errors: true 
      },
      hot:true,
      open: true // 在启用webpack-dev-server时，自动打开浏览器
  },
  module: {
      rules: [
          {
              test: /\.vue$/,
              loader: 'vue-loader' // 处理以.vue结尾的文件
          },
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件
          {
              test: /\.less$/, // 处理less文件
              use: [
                  'style-loader',
                  'css-loader',
                  'less-loader'
              ]
          },
          {
              test: /\.(gif|jpg|jpeg|png|svg)$/, // 处理图片文件
              use: [
                  {
                      loader: 'url-loader',
                      options: {
                          limit: 1024,
                          name: '[name].[ext]'
                      }
                  }
              ]
          }
      ]
  }
}